<template>
    <div>
        <el-row :gutter="20">
             <el-col :span="12" :offset="6">
                 <h1 style="font-size:30px"><i class="el-icon-view" style="margin-right:20px"></i>整体关系图</h1>
                 <h3>Global View OF Knowledge Graph</h3>
                 <p align="justify" style="margin:50px 0px">我们终于来到了激动人心的图结构展示环节，其实，没有图，并不算是一个完整的知识图谱，
                   而我们做了三种不同类型的知识图谱，保证满足大家的需要。这里的知识图谱是一个整体关系图，如果你想对《冰与火之歌》中的人物、家族、城堡
                   各种错综复杂的关系进行一个整体上的梳理与研究，那么这张图是适合你的！你可以通过调节下方的按钮实现某个节点的聚焦，调节计数器来控制要显示的
                   关系数量，这里我们给您设置了默认值200，您可以自行手动增加要显示的关系数量（我们的后台共计两万多条关系，这里只显示了百分之一！）
                 </p>
             </el-col>
        </el-row>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-caret-bottom"></i></span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="flushvisual"><i class="el-icon-refresh"></i></el-button>
            <el-button style="float: right; margin-left:15px;margin-right:20px;padding:0px" type="text"><el-input-number v-model="limit" :step="100" size='mini'></el-input-number></el-button>
            <el-button style="float: right; padding: 5px 0px" type="text">
              <el-switch
                  v-model="iffocus"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </el-button>
          </div>
          <div>
            <GraphAll ref="child" :limit=limit :iffocus=iffocus></GraphAll>
            <!-- <StaticGraph></StaticGraph> -->
          </div>
       </el-card>
    </div>
</template>
<script>
import GraphAll from '@/components/Functions/Visual/GraphAll'
// import StaticGraph from '@/components/StaticGraph'
export default {
  name: 'Global',
  data () {
    return {
      limit: '200',
      iffocus: true
    }
  },
  updated () {
    this.$refs.child.getdatas()
  },
  mounted () {
    this.$refs.child.getdatas()
  },
  components: {
    GraphAll
  },
  methods: {
    flushvisual () {
      this.$refs.child.getdatas()
    }
  }
}
</script>
